<template>
  <div id="Commodity2">
    <ul v-for="(list, index) in list" :key="index">
      <li :class="[shadeRp,shadeRo,shadeYg,shadePy,shadeBo,shadePb,shadeBg]">{{list.title}}</li>
      <li>{{list.details}}</li>
      <li>
        <img :src="list.img" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Commodity2',
  props: ['list', 'shadeRp', 'shadeRo', 'shadeYg', 'shadePy', 'shadeBo', 'shadePb', 'shadeBg']
}
</script>

<style scoped>
#Commodity2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
ul {
  width: 100%;
  margin: 2px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
ul li {
  margin: 0 0 10px 0;
}
ul li:nth-child(1) {
  font-size: 32px; /*px*/
  font-weight: 900;
}
ul li:nth-child(2) {
  font-size: 24px; /*px*/
}
ul li:nth-child(3) {
  display: flex;
  justify-content: center;
}
ul li:nth-child(3) img {
  width: 80%;
}
.shadeRO {
  background: linear-gradient(left, rgba(255, 0, 0, 1), rgba(255, 155, 1, 1));
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
}
.shadeRP {
  background: linear-gradient(left, rgba(255, 0, 0, 1), rgba(255, 0, 255, 1));
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
}
.shadeYG {
  background: linear-gradient(left, rgba(255, 155, 0, 1), rgba(0, 255, 0, 1));
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
}
.shadePY {
  background: linear-gradient(left, rgba(255, 0, 255, 1), rgba(255, 255, 0, 1));
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
}
.shadeBO {
  background: linear-gradient(left, rgba(0, 0, 255, 1), rgba(255, 155, 0, 1));
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
}
.shadePB {
  background: linear-gradient(left, rgba(255, 0, 255, 1), rgba(155, 0, 255, 1));
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
}
.shadeBG {
  background: linear-gradient(left, rgba(0, 0, 255, 1), rgba(0, 255, 0, 1));
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
}
</style>
